const BLOKS = {
    AIR: 0,
    SPAWN: 1,
    STAR: 2,
    BASE: 3,
    SPRING: 4,
    SLOPE: 5,
    MOVE: 6,
}

class Player {
    constructor() {
        this.x = 0
        this.y = 0
        this.w = 40
        this.h = 40
        this.dx = 0
        this.dy = 0

        // 是否在地面
        this.isG = 0

        // 速度,跳跃高度,重力加速度
        this.sp = 5
        this.jp = -12
        this.g = 0.6

        // 方向按键
        this.key = {
            up: 0,
            l: 0,
            r: 0,
        }

        // 眼睛方向
        this.eye = 0

        /** @type {CanvasRenderingContext2D } */
        this.ctx = null

        window.addEventListener('keydown', (e) => {
            if (e.key == 'a') (this.key.l = 1), (this.eye = 1)
            if (e.key == 'd') (this.key.r = 1), (this.eye = 0)
            // 设置向上按键, 设置离开地面, 设置跳跃向量
            if (e.key == 'w')
                this.isG &&
                    ((this.key.up = 1), (this.isG = 0), (this.dy += this.jp))
        })
        window.addEventListener('keyup', (e) => {
            if (e.key == 'a') this.key.l = 0
            if (e.key == 'd') this.key.r = 0
            if (e.key == 'w') this.key.up = 0
        })
    }

    updata() {
        // 控制方向
        this.key.l || (this.dx = this.sp)
        this.key.r || (this.dx = -this.sp)
        !this.key.l && !this.key.r && (this.dx = 0)

        // 控制重力
        !this.isG && (this.dy += this.g)

        // 设置这一帧位置
        this.x += this.dx
        this.y += this.dy
    }

    draw() {
        if (this.ctx) {
            // 绘制身体
            this.ctx.fillStyle = 'red'
            this.ctx.fillRect(this.x, this.y, this.w, this.h)

            // 绘制眼睛
            this.ctx.fillStyle = 'pink'
            this.ctx.fillRect(
                this.x + (this.eye ? 5 : this.w - 10),
                this.y + 10,
                5,
                5
            )
        }
    }
}
class Platform {
    constructor(x, y, type) {
        this.x = x
        this.y = y
        this.w = 50
        this.h = 50

        this.type = type
    }

    /**
     * 绘制平台
     * @param {CanvasRenderingContext2D} ctx 画布
     */
    draw(ctx) {
        // if (this.type == BLOKS.BASE) {
        ctx.fillStyle = 'skyblue'
        ctx.fillRect(this.x, this.y, this.w, this.h)
        // }
    }
}

class Game {
    /**
     * 初始化Game类
     * 使用 addPLayer 添加玩家
     * 使用 addPlatform 添加平台
     * 使用 startGame 开始游戏
     * @param {HTMLCanvasElement} canvas 画布元素
     */
    constructor(canvas) {
        this.canvas = canvas
        this.ctx = this.canvas.getContext('2d')
        /** @type {Platform[]} */
        this.platform = []
        /** @type {Player} */
        this.player = null
    }

    _loop() {
        this.updata()
        this.draw()
        requestAnimationFrame(this._loop.bind(this))
    }

    updata() {
        this.player.isG = 0
        this.player.updata()

        if (this.player.y + this.player.h > this.canvas.height) {
            this.player.dy = 0
            this.player.isG = 1
            this.player.y = this.canvas.height - this.player.h
        }

        this.platform.forEach((i) => {
            if (this.checkCollision(this.player, i))
                this.resolveCollision(this.player, i)
        })
    }
    draw() {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
        this.player.draw()
        this.platform.forEach((i) => [i.draw(this.ctx)])
    }

    /**
     * 设置当前游戏玩家
     * @param {Player} player 玩家类
     */
    addPlayer(player) {
        this.player = player
        this.player.ctx = this.ctx
    }
    setPlayer(x, y) {
        console.log("设置角色位置在",x,y);
        
        this.player.x = x
        this.player.y = y
    }
    /**
     * 添加平台
     * @param {Platform} platform 平台
     */
    addPlatform(platform) {
        this.platform.push(platform)
    }
    startGame() {
        requestAnimationFrame(this._loop.bind(this))
    }
    stopGame() {}
    /**
     * 判断玩家与平台的碰撞
     * @param {Player} player 玩家
     * @param {Platform} platform 平台
     */
    checkCollision(player, platform) {
        return (
            player.x < platform.x + platform.w &&
            player.x + player.w > platform.x &&
            player.y < platform.y + platform.h &&
            player.y + player.h > platform.y
        )
    }
    /**
     * 解决玩家与平台的碰撞
     * @param {Player} player 玩家
     * @param {Platform} platform 平台
     */
    resolveCollision(player, platform) {
        // 计算四个方向的重叠量
        const overlapTop = player.y + player.h - platform.y
        const overlapButton = platform.y + platform.h - player.y
        const overlapLeft = player.x + player.w - platform.x
        const overlapRight = platform.x + platform.w - player.x

        const min = Math.min(
            overlapTop,
            overlapButton,
            overlapLeft,
            overlapRight
        )

        if (overlapTop == min) {
            player.isG = 1
            player.dy = 0
            player.y = platform.y - player.h
        } else if (overlapButton == min) {
            player.dy = 0
            player.y = platform.y + platform.h
        } else if (overlapLeft == min) {
            player.x = platform.x - player.w
        } else if (overlapRight == min) {
            player.x = platform.x + platform.w
        }
    }
}

export { Game, Player, Platform, BLOKS }
